<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
    <style>
        .showdowbox{
            position:absolute;
            top: 0;
            left: 0;
            background: rgba(100,100,100,0.5)  url(./img/1.gif) no-repeat center;
            width: 100%;
            height: 100%;
            display: none;
        }

    </style>
</head>
<body>
    <button>获取数据</button>
    <button>添加数据</button>
    <p></p>
    <div class="showdowbox"></div>
    <script>

        axios.interceptors.request.use(config=>{
            // 加显示loading
            document.querySelector('.showdowbox').style.display = 'block';
            return config;
        })

        axios.interceptors.response.use(res=>{
            // 隐藏loading
            document.querySelector('.showdowbox').style.display = 'none';
            return res;
        })

        document.querySelector('button').onclick =async function(){
            
            let res = await axios('http://localhost:3000/students');
            console.log(res);
            
            document.querySelector('p').innerHTML = res.data[0].name;
        }


        document.querySelectorAll('button')[1].onclick =async function(){
            let res = await axios({
                url:'http://localhost:3000/students',
                method:"post",
                data:{
                    name:"老赵",
                    age:16,
                    score:100
                }
            });
            console.log(res);
            document.querySelector('p').innerHTML = res.data[0].name;
        }

        // document.querySelectorAll('button')[1].onclick =async function(){
        //     document.querySelector('.showdowbox').style.display = 'block';
        //     let res = await axios({
        //         url:'http://localhost:3000/students',
        //         method:"post",
        //         data:{
        //             name:"老赵",
        //             age:16,
        //             score:100
        //         }
        //     });
        //     console.log(res);
        //     document.querySelector('.showdowbox').style.display = 'none';
        //     document.querySelector('p').innerHTML = res.data[0].name;
        // }

    </script>

</body>
</html>